<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <!-- 三级分类 -->
        <div class="cp-container">
            <div class="content-body">
                <div class="firstLine">
                    <span :class="isshowC?'allificationC':'allification'" @click="getAll">全部分类</span>
                    <span :class="hasColor===i?'has':'nohas'" v-for="(item,i) in lists" :key="i" @click="doShowtwo(item,i)">{{item.text}}</span>
                </div>
                <!-- <div class="firstLine" v-else>
                    <span class="allification" @click="getAll">全部分类</span>
                    <span>{{text}}</span>
                </div> -->
                <div v-if="twoShow" class="twos">
                    <div class="line"></div>
                    <div class="firstLine">
                        <span :class="isshowD?'allificationD':'allification'" @click="getTwo">二级分类</span>
                        <span :class="hasColors===i?'has':'nohas'" v-for="(value,i) in twoList.nodes" :key="i" @click="doShowThree(value,i)">{{value.text}}</span>
                    </div>
                </div>
                <div class="line"></div>
                <div class="firstLine">
                    <span :class="zclass?'allification':'allifications'" @click="comprehensive">综合排序</span>
                    <span :class="isclass?'allification':'allifications'" @click="changeState" v-if="xq">发布时间<i class="el-icon-top" style="color:#ff7373" v-if="isshwo"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span><span :class="hasclass?'allification':'allifications'" @click="changeStates" v-if="xq">截止时间<i class="el-icon-top"  v-if="isshwos" style="color:#ff7373"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span>
                    <span :class="isclass?'allification':'allifications'" @click="changeState" v-if="fw">成交量<i class="el-icon-top" style="color:#ff7373" v-if="isshwo"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span><span :class="hasclass?'allification':'allifications'" @click="changeStates" v-if="fw">价格<i class="el-icon-top"  v-if="isshwos" style="color:#ff7373"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span>
                    <span :class="isclass?'allification':'allifications'" @click="changeState" v-if="zj">项目数量<i class="el-icon-top" style="color:#ff7373" v-if="isshwo"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span><span :class="hasclass?'allification':'allifications'" @click="changeStates" v-if="zj">价格<i class="el-icon-top"  v-if="isshwos" style="color:#ff7373"></i><i class="el-icon-bottom" v-else style="color:#8ddfcd"></i></span>
                    <el-select v-model="value" placeholder="请选择" @change="sltoneChange" style="height: 56px;line-height: 56px;">
                        <el-option
                            key="全国"
                            label="全国"
                            value="全国">
                        </el-option>
                        <el-option
                            v-for="item in provinceCityData"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="value2" placeholder="请选择" @change="slttwoChange" style="height: 56px;line-height: 56px">
                        <el-option
                            v-for="item in twoCity"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch, Prop} from 'nuxt-property-decorator'
import {provinceCityData} from '~/api/area'
import {
    State
} from 'vuex-class'
@Component({})
export default class LevelMenu extends Vue {
    @Prop({
        type: String,
        default: 'qiao'
    }) types !: String
    twoList: any = []
    threeList: any = []
    jsonList: any = {
        classId: '',
        sort: '',
        sortField: '',
        areaIds: ''
    }
    text: string = ''
    twotext: string = ''
    isshowC: boolean = false
    isshowD: boolean = false
    showAll: boolean = true
    zclass: boolean = true
    isclass: boolean = false
    hasclass: boolean = false
    hasColor: number = 999
    hasColors: number = 999
    twoShow: boolean = false
    threeShow: boolean = false
    isshwo: boolean = true
    isshwos: boolean = false
    isTf: boolean = false
    isTfs: boolean = false
    fw: boolean = false
    xq: boolean = false
    zj: boolean = false
    demandHall: string = ''
    requirements: string = ''
    serviceHall: string = ''
    services: string = ''
    path: string = ''
    value: string = ''
    value2: string = ''
    twoCity: any = []
    provinceCityData: any = []
    isType: String = ''
    lists: any = []
    timer: any = null
    @State tree: any
    @State classid: any
    @State treeNum: any
    @State classidNum: any
    @Watch('tree', {immediate: true})
    twoListChange (n:any, o:any) {
        // console.log(n)
        // console.log(o)
    }
    @Watch('$route', {immediate: true, deep: true})
    routerchange (to: any) {
        // console.log(to.query.mainId)
        const str = to.query.mainId + ''
        if (to.query.id) {
            if (to.query.id === '45') {
                this.hasColor = 7
            } else if (to.query.id === '32') {
                this.hasColor = 6
            } else if (str === '101') {
                this.hasColor = 5
                // this.init()
                // console.log(this.tree)
                // this.twoList = this.$store.state
                // console.log(this.twoList)
                // if (this.$store.state) {
                //     console.log(this.$store.state.tree)
                // }
                // if (this.twoList.length > 0) {
                //     console.log(98)
                // }
                // this.twoShow = true
            }
        }
        if (to.path === '/qiao/s') {
            this.lists = this.tree
            this.fw = true
            this.xq = false
            this.zj = false
        } else if (to.path === '/qiao/d') {
            this.lists = this.tree
            this.xq = true
            this.fw = false
            this.zj = false
        } else if (to.path === '/community/expert') {
            this.lists = this.classid
            this.zj = true
            this.xq = false
            this.fw = false
        }
    }
    // init () {
    //     try {
    //         if (this.tree) {
    //             console.log(98)
    //             console.log(this.tree)
    //             // this.twoList = this.tree[4]
    //             // this.twoShow = true
    //             clearTimeout(this.timer)
    //         }
    //     } catch {
    //         // console.log(77)
    //         this.timer = setTimeout(() => {
    //             this.init()
    //         }, 200)
    //     }
    // }
    switchChange () {
        if (this.isType === '/qiao/d') {
            this.lists = this.tree
        } else if (this.isType === '/qiao/s') {
            this.lists = this.tree
            // console.log(this.$route.query.mainId + '')
            if (this.$route.query.mainId + '' === '101') {
                // console.log(11)
                // console.log(this.$route.query.mainId + '')
                this.twoList = this.tree[5]
                this.twoShow = true
                // console.log(this.twoList)
                for (let i = 0; i < this.twoList.nodes.length; i++) {
                    // console.log(this.twoList.nodes[i].id)
                    // console.log(this.$route.query.id)
                    if (this.$route.query.id + '' === this.twoList.nodes[i].id) {
                        this.hasColors = i
                    }
                }
            }
            // this.twoList = this.tree[4]
            // console.log(this.lists)
        } else if (this.isType === '/community/expert') {
            this.lists = this.classid
        }
    }
    @Watch('treeNum', {immediate: true})
    treeNumFn (val: any) {
        if (val > 0) {
            this.switchChange()
        }
    }
    @Watch('classidNum', {immediate: true})
    classidNumFn (val: any) {
        if (val > 0) {
            this.switchChange()
        }
    }
    @Watch('types', {immediate: true})
    typeChange (val: any) {
        this.isType = val
    }
    mounted () {
        this.provinceCityData = provinceCityData
        this.path = this.$route.path
        // console.log(this.$store.state)
        // this.twoList = this.$store.state.tree
        // this.$nextTick(() => {
        // console.log(this.tree)
        if (this.treeNum >= 1) {
            // console.log(22)
            // console.log('hus')
            if (this.$route.query.mainId + '' === '101') {
                this.twoList = this.tree[5]
                this.twoShow = true
                // console.log(this.twoList)
                for (let i = 0; i < this.twoList.nodes.length; i++) {
                    // console.log(this.twoList.nodes[i].id)
                    // console.log(this.$route.query.id)
                    if (this.$route.query.id + '' === this.twoList.nodes[i].id) {
                        this.hasColors = i
                    }
                }
            }
        }
        // })
        // console.log(this.twoList)
        // console.log(this.tree)
        // console.log(this.tree)
        // if (this.$route.query.mainId === '101') {
        //     this.twoList = Array.from(this.$store.state.tree)[4]
        //     // this.twoShow = true
        //     console.log(this.twoList)
        // }
        // this.twoShow = true
        // console.log(this.$route.query.id)
        // if (this.$route.query.id) {
        //     this.jsonList.classId = this.$route.query.id
        //     console.log(this.jsonList)
        //     this.$emit('jsonListChange', this.jsonList)
        // }
    }
    getTwo () {
        this.hasColors = 999
        this.isshowD = false
        this.twoShow = true
    }
    changeState () {
        this.zclass = false
        this.isclass = true
        this.hasclass = false
        this.isTf = !this.isTf
        if (this.isTf) {
            this.isshwo = false
            if (this.fw) {
                this.jsonList.sortField = 'createDate'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.xq) {
                this.jsonList.sortField = 'publishDate'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.zj) {
                this.jsonList.sortField = 'SERVICENUM'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            }
        } else {
            this.isshwo = true
            if (this.fw) {
                this.jsonList.sortField = 'createDate'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.xq) {
                this.jsonList.sortField = 'publishDate'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.zj) {
                this.jsonList.sortField = 'SERVICENUM'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            }
        }
    }
    changeStates () {
        this.zclass = false
        this.hasclass = true
        this.isclass = false
        this.isTfs = !this.isTfs
        if (this.isTfs) {
            this.isshwos = true
            if (this.fw) {
                this.jsonList.sortField = 'servicePrice'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.xq) {
                this.jsonList.sortField = 'biddingDeadline'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.zj) {
                this.jsonList.sortField = 'PRICE'
                this.jsonList.sort = 'ASC'
                this.$emit('jsonListChange', this.jsonList)
            }
        } else {
            this.isshwos = false
            if (this.fw) {
                this.jsonList.sortField = 'servicePrice'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.xq) {
                this.jsonList.sortField = 'biddingDeadline'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            } else if (this.zj) {
                this.jsonList.sortField = 'PRICE'
                this.jsonList.sort = 'DESC'
                this.$emit('jsonListChange', this.jsonList)
            }
        }
    }
    sltoneChange () {
        if (this.value === '全国') {
            this.jsonList.province = ''
            this.jsonList.city = ''
            this.value = ''
            this.twoCity = []
        }
        this.value2 = ''
        this.jsonList.city = ''
        for (let i = 0; i < this.provinceCityData.length; i++) {
            if (this.provinceCityData[i].id === this.value) {
                this.twoCity = this.provinceCityData[i].children
            }
        }
        if (this.fw) {
            this.jsonList.areaIds = this.value
            this.$emit('jsonListChange', this.jsonList)
        } else if (this.xq) {
            this.jsonList.province = this.value
            delete this.jsonList.areaIds
            this.$emit('jsonListChange', this.jsonList)
        } else if (this.zj) {
            this.jsonList.areaIds = this.value
            this.$emit('jsonListChange', this.jsonList)
        }
    }
    slttwoChange () {
        if (this.fw) {
            this.jsonList.areaIds = this.value + ',' + this.value2
            this.$emit('jsonListChange', this.jsonList)
        } else if (this.xq) {
            this.jsonList.province = this.value
            this.jsonList.city = this.value2
            this.$emit('jsonListChange', this.jsonList)
        } else if (this.zj) {
            this.jsonList.areaIds = this.value + ',' + this.value2
            this.$emit('jsonListChange', this.jsonList)
        }
    }
    doShowtwo (val:any, num:number) {
        // this.showAll = false
        this.isshowD = false
        this.isshowC = true
        this.hasColor = num
        this.hasColors = 999
        this.text = val.text
        this.twoShow = true
        this.twoList = val
        this.jsonList.classId = val.id
        this.$emit('jsonListChange', this.jsonList)
    }
    doShowThree (val:any, num:number) {
        this.hasColors = 999
        this.isshowD = true
        this.twotext = val.text
        this.hasColors = num
        // this.twoShow = false
        this.threeShow = true
        this.threeList = val
        this.jsonList.classId = val.id
        this.$emit('jsonListChange', this.jsonList)
    }
    getLists (val:any) {
        this.jsonList.classId = val
        this.$emit('jsonListChange', this.jsonList)
    }
    changetitle () {
        if (this.path === '/qiao/s') {
            this.$router.push('/qiao/d')
        } else if (this.path === '/qiao/d') {
            this.$router.push('/qiao/s')
        }
    }
    getAll () {
        this.isshowC = false
        this.hasColor = 999
        this.twoShow = false
        this.showAll = true
        this.jsonList = {}
        this.$emit('jsonListChange', this.jsonList)
    }
    comprehensive () {
        this.hasclass = false
        this.isclass = false
        this.zclass = true
        if (this.zj) {
            this.jsonList.sort = 'DESC'
            this.jsonList.sortField = 'COMPREHENSIVE'
            this.$emit('jsonListChange', this.jsonList)
        } else {
            this.jsonList.sort = 'DESC'
            this.jsonList.sortField = 'createDate'
            this.$emit('jsonListChange', this.jsonList)
        }
    }
}
</script>
<style lang="scss" scoped>
.nohas{
    color: black;
}
.has{
    color: #11a9e8;
}
.containe::v-deep .el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 120px;
    margin-left: 20px;
    // color: #409EFF;
}
.el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 110px;
    margin-left: 20px;
}
.containe{
    .left{
        position: absolute;
        z-index: 1;
    }
    .elrow{
        width: 100%;
        height: 52px;
        line-height: 52px;
        background-color: #e3e3e3;
        border-radius: 4px;
        span {
            cursor: pointer;
        }
    }
    .f-box{
        position: relative;
    }
    .f-boxr{
        // position: relative;
    }
    .flleft{
        z-index: 2;
        position: absolute;
        left: 10px;
        color: #11a9e8;
        font-weight: 700;
        font-size: 20px;
    }
    .fllerg{
        z-index: 2;
        position: absolute;
        right: 50px;
        color: #11a9e8;
        font-size: 14px;
        font-weight: 700;
    }
    .fllefts{
        z-index: 2;
        position: absolute;
        right: 200px;
        font-size: 16px;
        color: #333333;
    }
    .fllergs{
        z-index: 2;
        position: absolute;
        right: 30px;
        font-size: 14px;
        color: #666666;
    }
    .content-body{
        cursor: pointer;
        min-height: 100px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin: 20px auto;
    }
    .allification{
        color: #11a9e8;
        height: 56px;
    }
    .allificationC{
        color: black;
    }
    .allificationD{
        color: black;
    }
    .allifications{
        height: 56px;
    }
    .firstLine{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        // height: 56px;
        // line-height: 56px;
        // vertical-align: middle;
    }
    .firstLine>span{
        width: 120px;
        text-align: center;
        font-size: 14px;
        height: 56px;
        line-height: 56px;
    }
    .line{
        width: 96%;
        height: 1px;
        background-color: #f3f5f7;
        margin-left: 2%;
    }
}
.containe::v-deep li.number{
        margin: 0 5px;
        background-color:#fff;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }
</style>
>>>>>>> .r14094
